<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>D3JS练习</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.min.js"></script>
  </head>
  <body>
    <h3>D3JS基础练习</h3>
    <script>
      //使用js定义的数据内容变化更多
      //脚本实现数据变化，其他的不变
      let div = document.createElement("div");
      div.innerHTML = "hellow-world";
      document.body.appendChild(div);
      //使用链式操作来实现
      d3.select("body").append("div").text("i love you");

      var data = [8, 9, 7, 6, 50];
      d3.select("body")
        .selectAll("p")
        .data(data)
        .enter()
        .append("p")
        .text("newhappy")
        .style("(color: red)");
    </script>
  </body>
</html>
